<template>
	<view class="detil-view">
		<image :src="item.morebagPublishPictures[0].picture" class="goods-img" mode="aspectFit"></image>
		<view class="main">
			<view class="price">
				<view class="name">
					{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
				</view>
			</view>
			<!-- <view class="commodity-info">
				<view class="titleGoods">{{$t("commDetail.detail")}}</view>
				<view class="commodity-text" v-if="item.measurement">
					<view class="ls">
						{{$t("commDetail.length")}}: <text
							class="bd" style="margin-left: 10rpx;">{{item.measurement.indexOf("x") === -1?item.measurement.split("*")[0]:item.measurement.split("x")[0]}}</text>
					</view>
					<view class="ls">
						{{$t("commDetail.width")}}: <text
							class="bd" style="margin-left: 10rpx;">{{item.measurement.indexOf("x") === -1?item.measurement.split("*")[1]:item.measurement.split("x")[1]}}</text>
					</view>
					<view class="ls">
						{{$t("commDetail.height")}}: <text
							class="bd" style="margin-left: 10rpx;">{{item.measurement.indexOf("x") === -1?item.measurement.split("*")[2]:item.measurement.split("x")[2]}}</text>
					</view>
				</view>
				<view class="commodity-text temp" v-if="series">
					<view class="ls">
						{{$t("language") == "zh"?series[0].parentName:series[0].parentEndName}}: <text
							class="bd" style="margin-left: 10rpx;">{{$t("language") == "zh"?series[0].brandName:series[0].brandName}}</text>
					</view>
				</view>
				<view class="commodity-text" v-if="item.category">
					<view class="lh plaWid" v-for="item in item.category" :key="item.id">
						{{$t("language") == "zh"?item.parentName:item.parentEndName}}: <text
							class="bd" style="margin-left: 10rpx;">{{$t("language") == "zh"?item.brandName:item.brandEngName}}</text>
					</view>
				</view>
			</view> -->

			<view class="desc">
				<view class="title">
					{{$t("iptLogistics.hint1")}}：
				</view>
				<view class="addr-mobile">
					<view class="addr">
						{{$t("iptLogistics.addr")}}: {{companyAddr}}
					</view>
					<view class="mobile">
						{{companyPhone}}
					</view>
				</view>
			</view>

			<view class="input-msg">
				<view class="msg">
					<view class="title2">
						{{$t('sendGoodsDetail.exp')}}
					</view>
					<input type="text" v-model="company" :placeholder="$t('sendGoodsDetail.hint2')" class="in-content">
				</view>

				<view class="msg two">
					<view class="title2">
						{{$t('sendGoodsDetail.num')}}
					</view>
					<input type="text" v-model="num" :placeholder="$t('sendGoodsDetail.hint1')" class="in-content">
				</view>
			</view>

			<view class="img-list">
				<view class="img-item" v-if="imgList.length > 0" v-for="(item,index) in imgList" :key="item">
					<image :src="item" mode="aspectFit"></image>
					<view class="del" @click="delImg(index)" v-if="item">
						<u-icon name="close-circle-fill" size="28"></u-icon>
					</view>
				</view>
			</view>

			<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="1">
				<view class="upload-img" style="flex: 1;">
					{{$t("wishReleased.uploadPictures")}}
				</view>
			</u-upload>

			<view class="footer-but" @tap="putOrder">
				{{$t('sendGoodsDetail.ship')}}
			</view>
		</view>
	</view>
</template>

<script>
	import { getCommCateDetail, updateOrder, getAboutUs } from "@/common/api.js"
	import { API_URL } from "@/env.js"

	export default {
		data() {
			return {
				item: null,
				series: null,
				num: "",
				company: "",
				companyAddr: "",
				companyPhone: "",
				fileList1: [],
				imgList: [],
				imgNum: 0
			}
		},
		methods: {
			// 删除图片
			delImg(index) {
				this.imgList.splice(index, 1);
				this.imgNum--;
			},
			// 新增图片
			afterRead(event) {
				console.log(event.file);
				if(this.imgList.length >= 1) {
					uni.showToast({
						icon: 'none',
						title: this.$t("goodsReleased.oneImg"),
						duration: 1200
					})
					return
				}
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(lists.length);
				// this.imgNum += lists.length;
				for (let i = 0; i < lists.length; i++) {
					const result = this.uploadFilePromise(lists[i].url)
					result
					.then((res) => {
						console.log(res.msg);
						this.imgList.push(res.msg);
						this.queryParams.imgs.push(res.msg);
						this.imgNum++;
					})
					.catch((res) => {
						console.log(res);
					})
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					// let token = uni.getStorageSync('token')
					// console.log(token);
					let a = uni.uploadFile({
						url: API_URL + '/oss/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						timeout: 5000,
						header: {
							// 'Authorization': token
						},
						success: (res) => {
							console.log(res);
							const data = JSON.parse(res.data)
							resolve(data)
						},
						fail: (res) => {
							setTimeout(() => {
								console.log(res);
								reject(res)
							}, 1000)
						},
					});
				})
			},
			async initCompanyAddr() {
				const res = await getAboutUs();
				console.log(res);
				if(res.code === 200) {
					this.companyAddr = res.data.companyAddres;
					this.companyPhone = res.data.companyPhone;
				}
			},
			async initData() {
				const res2 = await getCommCateDetail(this.item.id);
				console.log(res2);
				if(res2.data.length > 0) {
					let index = null;
					for (let i = 0; i < res2.data.length; i++) {
						if(res2.data[i].parentName === "系列" || res2.data[i].parentEndName === "series") {
							index = i;
							break;
						}
					}
					this.series = res2.data.splice(index, 1);
					this.item["category"] = res2.data;
				}
			},
			async putOrder() {
				if(!this.num) {
					uni.showToast({
						icon: 'none',
						title: this.$t("sendGoodsDetail.hint1"),
						duration: 1200,
						mask: true
					})
					return;
				}

				if(!this.company) {
					uni.showToast({
						icon: 'none',
						title: this.$t("sendGoodsDetail.hint2"),
						duration: 1200,
						mask: true
					})
					return;
				}

				if(this.imgList.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t("sendGoodsDetail.hint3"),
						duration: 1200,
						mask: true
					})
					return;
				}

				const res = await updateOrder({expressCompany: this.company, expressNum: this.num, id: this.item.orderId, orderState: 4, orderStatus: 6, sellerPicture: this.imgList.join('')});
				if(res.code === 200) {
					uni.redirectTo({
						url: "/pages/goodsPublish/goodsPublish"
					})
				}
			}
		},
		onLoad(option){
			if (option.item) this.item = JSON.parse(decodeURIComponent(option.item));
			this.initData();
			this.initCompanyAddr();
			console.log(this.item);
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.img-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
		background-color: #FBFBFB;

		.img-item {
			position: relative;

			image {
				height: 386rpx;
				margin: 20rpx 0;
			}

			.del {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
			}
		}
	}

	.u-upload {
		margin-top: 24rpx;
		background-color: #FBFBFB;
		width: 100%;
		position: relative;
	}

	.upload-img {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #858585;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		background-color: #fff;
		border-radius: 10px;
		border: 1px solid rgba(128, 128, 128, 0.1);
		text-align: center;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 200rpx;
	}

	.detil-view {
		width: 100%;
		height: 100%;
	}

	.desc {
		height: 220rpx;
		color: #858585;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.title {
			height: 60rpx;
			padding-left: 20rpx;
		}

		.addr-mobile {
			border-radius: 20rpx;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
			padding: 10rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;

			.addr {
				width: 600rpx;
			}

			.mobile {
				margin-top: 20rpx;
			}
		}
	}

	.goods-img {
		width: 100%;
		height: 386rpx;
		padding-top: 20rpx;
		background-color: #fff;
	}

	.main {
		width: 100%;
		background-color: #FBFBFB;
		padding: 0 24rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.goods-name {
			width: 100%;
			height: 168rpx;
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			letter-spacing: 0rpx;
			text-align: left;
			padding-left: 42rpx;
			padding-top: 30rpx;
			line-height: 54rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;
		}

		.exterior {
			width: 100%;
			height: 92rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 134rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;
			margin-top: 20rpx;
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 40rpx;
			letter-spacing: 0rpx;

			.green-color {
				color: #26d743;
			}

			.yellow-color {
				color: #dc9e79;
			}
		}

		.goods-detils {
			width: 100%;
			height: 486rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;
			margin-top: 20rpx;
		}
	}

	.msg {
		display: flex;
		align-items: center;
		padding: 0 26rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.two {
		margin-top: 80rpx;
	}

	.title2 {
		width: 130rpx;
		height: 40rpx;
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		text-align: left;
	}

	.in-content {
		height: 80rpx;
		padding-left: 20rpx;
		flex-grow: 1;
		border-radius: 10rpx;
		background: #FFFFFF;
		border: 2rpx solid #80808019;
		margin-left: 40rpx;
	}

	.in-content::placeholder {
		color: #D9D9D9;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		text-align: left;
	}

	.footer-but {
		height: 90rpx;
		width: 100%;
		border-radius: 20rpx;
		background: #000000;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 90rpx;
		letter-spacing: 0rpx;
		text-align: center;
		margin-top: 108rpx;
	}

	@mixin bg {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;
		margin-top: 20rpx;
	}

	.price {
		font-family: PingFang SC;
		font-weight: bold;
		padding: 32rpx 24rpx;

		@include bg;
		.titleNew {
			margin-bottom: 18rpx;
			color: #000000;
			font-size: 30rpx;
			text-align: left;
		}

		.price-num {
			display: flex;
			align-items: center;

			.price-num-b {
				color: #FF0000;
				font-size: 36rpx;
				margin-right: 36rpx;
			}

			.price-num-s {
				// margin-left: 36rpx;
				color: #FF0000;
				font-size: 20rpx;
			}

			.name {
				color: #000000;
				font-size: 30rpx;
			}
		}

		.name {
			// margin-top: 22rpx;
		}
	}

	.commodity-info {
		font-family: PingFang SC;
		font-weight: bold;

		@include bg;
		.titleGoods {
			color: #000000;
			font-size: 30rpx;
			padding: 24rpx 0;
		}

		.commodity-text {
			padding: 24rpx 42rpx;
			display: flex;
			flex-direction: column;
			color: #858585;
			font-size: 24rpx;

			.lh {
				// margin-right: 30rpx;
				line-height: 70rpx;
				letter-spacing: 2rpx;

				.bd {
					color: #111111;
				}
			}

			.ls {
				margin-right: 30rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;

				.bd {
					color: #111111;
				}
			}

			.plaWid {
				// width: 200rpx;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				// overflow: hidden;
				margin-right: 20rpx;
			}
		}
	}

	.temp {
		padding-bottom: 0 !important;
		letter-spacing: 2rpx;
	}
</style>
